<template>
    <div>
        <div>
            <div>
                <el-form :model="data" ref="form" label-width="90px" :inline="true">
                    <el-row :gutter="24">
                        <el-col :span="6" :offset="0">
                            <template v-if="data.subType === '销售退货' || data.subType === '销售出库'">
                                <el-form-item label="客户：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                            <template v-else-if="data.subType == '零售退货'">
                                <el-form-item label="会员卡号：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                            <template v-else-if="data.subType == '采购'">
                                <el-form-item label="供应商：">
                                    {{ data.supName }}
                                </el-form-item>
                            </template>
                        </el-col>

                        <el-col :span="6" :offset="0">
                            <el-form-item label="单据日期：">
                                {{ data.operTime }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="单据编号：">
                                {{ data.headNumber }}
                            </el-form-item>
                        </el-col>


                        <el-col :span="6" :offset="0">
                            <template
                                v-if="data.subType === '销售退货' || data.subType === '销售出库' || data.subType === '采购' || data.subType == '零售退货'">
                                <el-form-item label="关联订单：">
                                    {{ data.linkNumber }}
                                </el-form-item>
                            </template>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <template v-if="data.subType === '销售退货' || data.subType === '销售出库' || data.subType === '采购'">
                    <el-table :data="data.tableData" show-summary :summary-method="getSummaries" border stripe>
                        <el-table-column type="index" label="#" width="53" align="center" />
                        <el-table-column v-for="col in data.tableTitle" :prop="col.prop" :key="col.id"
                            :label="col.label" :width="col.width">
                        </el-table-column>
                    </el-table>
                </template>
                <template v-else>
                    <el-row :gutter="24">
                        <el-col :span="18" :offset="0">

                        </el-col>
                        <el-col :span="6" :offset="0">

                        </el-col>
                    </el-row>
                </template>
            </div>
            <div style="margin-top: 60px;">
                <el-form :model="data" label-width="110px">
                    <el-row :gutter="24">
                        <el-col :span="6" :offset="0">
                            <el-form-item label="优惠率：">
                                {{ data.discount }}%
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="退款优惠：">
                                {{ data.discountMoney }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="优惠后金额：">
                                {{ data.discountLastMoney }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="其他费用：">
                                {{ data.otherMoney }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="24">
                        <el-col :span="6" :offset="0">
                            <el-form-item label="结算账户：">
                                {{ data.accountName }}
                            </el-form-item>
                        </el-col>
                        <template v-if="data.subType === '销售退货'">
                            <el-col :span="6" :offset="0">
                                <el-form-item label="本次退款：">
                                    {{ data.deposit }}
                                </el-form-item>
                            </el-col>
                        </template>

                        <el-col :span="6" :offset="0">
                            <el-form-item label="本次欠款：">
                                {{ data.debt }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="0">
                            <el-form-item label="销售人员：">
                                {{ data.salesMan }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, onMounted } from 'vue'
import request from '@/api/request';
import { getDetail } from '@/components/material_bill_detail/js/Stoke'

const form = ref(null)
const data = ref({})

const props = defineProps(['data'])
data.value = props.data

/**
 * 设置表尾合计
 * @param param 表格数据
 */
const getSummaries = (param) => {
    // console.log(param)
    const { columns, data } = param;
    const sums = [];

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "合计";
            return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // 只合计amount1和amount3，想合并哪些列就在这里指定
        if (column.property === "operNumber" || column.property === "allPrice"
            || column.property === "taxMoney" || column.property === "taxLastMoney") {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
        }
    });
    return sums;
}
</script>

<style scoped></style>
